<template>
  <div :class="$route.name == 'login' ? 'login-app' : 'app'">
    <Nav v-if="$route.name != 'login'" />
    <div class="main">
      <Header v-if="$route.name != 'login'" />
      <router-view
        style="min-width: 1200px;"
        v-if="isRouterAlive"
        :class="$route.name == 'login' ? '' : 'router-page'"
      />
    </div>
  </div>
</template>
<script>
import Nav from "@/components/Nav.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: { Nav, Header, Footer },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.name != "login") {
          if (!this.$store.state.userInfo) {
            this.$router.push("/login");
          }
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>
<style lang="less">
@import url("./styles/index.less");
@import url("./styles/ql-font.less");
</style>
